<template>
  <div class="articleChild-container">
    <el-card v-if="route === '1'" class="card">
       <div class="top">
         下面来说一下几种常用的开发工具：
       </div>
       <div class="middle">
         <span @click="jumpLink(i)" v-for="(item,i) in font" :key="i">
           {{ item }}
         </span>
       </div>
       <div class="bottom">
         如果是初学者的话，我建议先使用 HBuilder（记事本也可以，不过需要你将元素标签属性记牢固），
         很容易上手，熟练后在使用 Visual Studio Code 或者是 Atom，这两个开发工具功能很强大，
         支持多种插件的安装，比如 C/C++、Python、Java 等等。
       </div>
       <iframe class="bili" style="width: 100%;" src="//player.bilibili.com/player.html?aid=841571430&bvid=BV1S54y1v7bH&cid=217990641&page=1&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
     </el-card>

    <el-card v-if="route === '2'" class="card">

        <div class="bigTitle">
          <h2>浏览器介绍:</h2>
        </div>
      <div class="smallTitle">
        <h3>1.概念:</h3>
      </div>
      <div class="BScontent">
        浏览器是指可以显示网页服务器或者文件系统的 HTML 文件（标准通用标记语言的一个应用）的内容，并让用户与这些文件交互的一种软件。
        它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。
        大部分网页为 HTML 格式。
      </div>


      <div class="smallTitle">
        <h3>2.常用浏览器:</h3>
      </div>
      <div class="BScontent">
        常用的浏览器有 QQ 浏览器、Internet Explorer 浏览器、
        Mozilla Firefox 浏览器、Google Chrome 浏览器、Safari 浏览器、Opera 浏览器、UC 浏览器、猎豹浏览器、搜狗浏览器、360 浏览器等等。
        在前端开发中，常用的浏览器是 Google Chrome 浏览器和 Mozilla Firefox 浏览器，在功能调试方面，效率很高，而且它们有许多优秀的扩展插件，
        可以帮助开发者们更快的进行开发。
      </div>

      <div class="smallTitle">
        <h3>3.浏览器内核</h3>
      </div>
      <div class="BScontent">
        浏览器最重要或者说核心的部分是 “Rendering Engine”，可大概译为 “渲染引擎”，不过我们一般习惯将之称为 “浏览器内核”。
        负责对网页语法的解释（如标准通用标记语言下的一个应用 HTML、JavaScript）并渲染（显示）网页。
        所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
        不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，
        这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。（PS: 温馨提示：面试笔试题也可能会考到，所以需要好好了解一下哦！）
      </div>

      <div class="smallTitle">
        <h3>3.浏览器使用的内核</h3>
      </div>
      <div class="BScontent sort">
        ○ IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；
      </div>
      <div class="BScontent sort">
        ○ Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink 内核；

      </div>
      <div class="BScontent sort">
        ○ Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；
      </div>
      <div class="BScontent sort">
        ○ Safari 浏览器内核：Webkit 内核；
      </div>
      <div class="BScontent sort">
        ○ Opera 浏览器内核：最初是自己的 Presto 内核，后来是 Webkit，现在是 Blink 内核；
      </div>
      <div class="BScontent sort">
        ○ 360 浏览器、猎豹浏览器内核：IE+Chrome 双内核；
      </div>
      <div class="BScontent sort">
        ○ 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
      </div>
      <div class="BScontent sort">
        ○ 百度浏览器、世界之窗内核：IE 内核；
      </div>
      <div class="BScontent sort">
        ○ 2345 浏览器内核：以前是 IE 内核，现在也是 IE+Chrome 双内核；
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 30px" src="//player.bilibili.com/player.html?aid=74093288&bvid=BV1sE41187qA&cid=126750182&page=4&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>

    <el-card v-if="route === '3'" class="card">
      <div class="bigTitle">
        <h2>HTML 的历史:</h2>
      </div>
      <div class="smallTitle">
        <h3>1.HTML 发展过程:</h3>
      </div>
      <div class="BScontent sort">
        ○ HTML（第一版）：1993 年 6 月由互联网工程工作小组 IETF (Interenet Engineering Task Force) 发布的 HTML 工作草案。
      </div>
      <div class="BScontent sort">
        ○ HTML2.0 ：1995 年 11 月作为 RFC 1886 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时。
      </div>
      <div class="BScontent sort">
        ○  HTML3..2 ：1996 年 1 月 14 日由 W3C 组织发布，是 HTML 文档第一个被广泛使用的标准。
      </div>
      <div class="BScontent sort">
        ○  HTML4.0 ： 1997 年 12 月 18 日由 W3C 组织发布，也是 W3C 推荐标准。
      </div>
      <div class="BScontent sort">
        ○  HTML4.01（微小改进）：1997 年 12 月 24 日由 W3C 组织发布，是 HTML 文档另一个重要的、广泛使用的标准。
      </div>
      <div class="BScontent sort">
        ○  XHTML1.0 ：发布于 2000 年 1 月 26 日，是 W3C 组织推荐标准，后来经过修订于 2002 年 8 月 1 日重新发布。

      </div>
      <div class="BScontent">
        在 HTML 的发展历史中，最为广为人知的是 HTML3.2 和 HTML4.01。
      </div>
      <div class="smallTitle">
        <h3>2.HTML5 的诞生:</h3>
      </div>
      <div class="BScontent sort">
        HTML5 是指万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。
        HTML5 的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如 video、audio 和 canvas 标记。
        还引进了新的功能，可以真正改变用户与文档的交互方式。
      </div>
      <div class="BScontent sort">
        HTML5 草案的前身名为 Web Application 1.0，于 2004 年被 WHATWG 提出，于 2007 年被 W3C 接纳，并成立了新的 HTML 工作团队。
      </div>
      <div class="BScontent sort">
        HTML5 的第一份正式草案已于 2008 年 1 月 22 日公布。HTML5 仍处于完善之中。
        2013 年 5 月 6 日，HTML5.1 正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：
        超文本标记语言。在这个版本中，新功能不断推出，以帮助 Web 应用程序的作者，努力提高新元素互操作性。
        直到 2014 年 10 月 29 日，经过几乎 8 年的艰辛努力，HTML5 标准规范终于制定完成了，并已公开发布。
      </div>
      <div class="bilibili" @click="jumpBilibili1">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74093288&bvid=BV1sE41187qA&cid=126750225&page=8&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <el-card v-if="route === '4'" class="card">
      <div class="bigTitle">
        <h2>CSS基础知识整理:</h2>
      </div>
      <div class="smallTitle">
        <h3>1.什么是CSS？</h3>
      </div>
      <div class="BScontent sort">
        CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）
        、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
      </div>
      <div class="BScontent sort">
        CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
      </div>
      <div class="smallTitle">
        <h3>2.CSS语法？</h3>
      </div>
      <div class="BScontent sort">
        CSS规则由两个主要部分构成：选择器以及一条或多条声明。
        每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。
      </div>
      <div class="BScontent sort">
        比如 selector{property：value}
      </div>
      <div class="BScontent sort">
        选择器通常是需要改变样式的HTML元素。
      </div>
      <div class="BScontent sort">
        比如 h1{color:red; font-size:14px;}
        h1是选择器，color和font-size是属性，red和14px是值。
      </div>
      <div class="smallTitle">
        <h3>3.创建CSS</h3>
      </div>
      <div class="BScontent sort">
        <h4>内部样式表：</h4>
      </div>
      <div class="BScontent sort">
        选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

      </div>
      <div class="BScontent sort">
        div{width:200px; height:200px; border:1px solid red;}
      </div>
      <div class="BScontent sort">
        <h4>行内式(内联样式)：</h4>
      </div>
      <div class="BScontent sort" >
        < div style="width:200px;height:100px;border:1px solid black;">< /div>
      </div>
      <div class="BScontent sort">
        <h4>外部样式表(外链式)：</h4>
      </div>
      <div class="BScontent sort" v-text="">
       < link rel="stylesheet" type="text/css" href="css/style.css" >
      </div>
      <div class="BScontent sort">
        <h4>样式优先级：内联样式>内部样式>外部样式</h4>
      </div>
      <div class="bilibili" @click="jumpBilibili2">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74113836&bvid=BV1HE41187Nf&cid=126787246&page=3&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

    </el-card>

    <el-card v-if="route === '5'" class="card">
    <div class="bigTitle">
      <h2>CSS3 弹性盒子:</h2>
    </div>
    <div class="smallTitle">
      <h3>1.简单介绍</h3>
    </div>
    <div class="BScontent sort">
      弹性盒模型（ Flexible Box 或 FlexBox）是一个 CSS3 新增布局模块，
      官方称为 CSS Flexible Box Layout Module，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）,
      分配空白空间 。弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。
    </div>
    <div class="smallTitle">
      <h3>2.基本知识</h3>
    </div>
    <div class="BScontent sort">
      弹性盒子是由弹性容器（flex container）和弹性子元素（flex item）组成，
      弹性盒子有一个主轴（main axis）和一个纵轴（cross axis），弹性子元素沿着主轴依次排列 ，
      侧轴垂直于主轴。弹性容器的主轴开始（main start）、主轴结束（main end）和侧轴开始（cross start）、侧轴结束（cross end）
      代表了弹性子元素排列的起始和结束位置
    </div>
    <div class="smallTitle">
      <h3>3.属性分类</h3>
    </div>
    <div class="BScontent sort">
      <h4>弹性容器的相关属性:</h4>
    </div>
    <div class="BScontent sort">
      flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
    </div>
    <div class="BScontent sort">
      <h4>flex-direction 属性:</h4>
    </div>
    <div class="BScontent sort">
      row、row-reverse、column、column-reverse
    </div>
    <div class="BScontent sort">
      <h4>flex-wrap 属性:</h4>
    </div>
    <div class="BScontent sort">
      nowrap、wrap、wrap-reverse
    </div>
    <div class="BScontent sort">
      <h4> justify-content 属性:</h4>
    </div>
    <div class="BScontent sort">
      flex-start、flex-end、center、space-between、space-around
    </div>
    <div class="BScontent sort">
      <h4> align-items 属性:</h4>
    </div>
    <div class="BScontent sort">
      flex-start、flex-end、center、baseline、stretch（默认值）
    </div>
    <div class="BScontent sort">
      <h4> align-content 属性:</h4>
    </div>
    <div class="BScontent sort">
      flex-start、flex-end、center、space-between、space-around、stretch（默认值）
    </div>
    <div class="bilibili" @click="jumpBilibili3">
      学习更多视频请点击这里
    </div>
    <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74158715&bvid=BV11E41187TQ&cid=126865660&page=1&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  </el-card>
    <el-card v-if="route === '6'" class="card">
      <div class="bigTitle">
        <h2>JavaScript基础语法:</h2>
      </div>
      <div class="smallTitle">
        <h3>1、分类</h3>
      </div>
      <div class="BScontent sort">
        <div>ECMAScript : js基本语法与标准</div>
        <div>DOM:  Document Object Model文档对象模型</div>
        <div>BOM : Browser Object Model浏览器对象模型</div>
      </div>
      <div class="smallTitle">
        <h3>2.数组Array</h3>
      </div>
      <div class="BScontent sort">
        <div>
          构造函数： var arr = new Array("123","abc","xxx");
        </div>
        <div>
          字面量：
          var arr = ["123","646","abc"];
        </div>
        <div>
          数组长度：
          var arr = new Array(6);(数组长度为6)
        </div>
      </div>
      <div class="smallTitle">
        <h3>3.数据类型</h3>
      </div>
      <div class="BScontent sort">
        <h4>简单数据类型:</h4>
      </div>
      <div class="BScontent sort">
        string、number、boolean
      </div>
      <div class="BScontent sort">
        <h4>复杂数据类型:</h4>
      </div>
      <div class="BScontent sort">
        String、Number、Boolean、Array、Math、Date、Obeject、function、RegExp(正则表达式)
      </div>
      <div class="BScontent sort">
        <h4>空数据类型:</h4>
      </div>
      <div class="BScontent sort">
        Null  ---→Null的数据类型会返回一个Object
        <div>undifined</div>
      </div>
      <div class="smallTitle">
        <h3>4、（Math）数学对象</h3>
      </div>
      <div class="BScontent sort">
        <div>向上取整    :    Math.ceil(number);</div>
        <div>向下取整     :   Math.floor(number);</div>
        <div>四舍五入   :     Math.round(number);</div>
        <div>求多个数字之间的最大值 :     Math.max()</div>
        <div>求多个数字之间的最小值   :     Math.min();</div>
        <div>求x的y次幂  :    Math.pow(x,y);</div>
        <div>求正弦值     :       Math.sin(x);</div>
        <div>Math.abs(x) :    得到一个数字的绝对值</div>
      </div>
      <div class="bilibili" @click="jumpBilibili4">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74206210&bvid=BV1KE411t7Xt&cid=126945024&page=1&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <el-card v-if="route === '7'" class="card">
      <div class="bigTitle">
        <h2>WebAPI编程:</h2>
      </div>
      <div class="smallTitle">
        <h3>1、什么是WebAPI</h3>
      </div>
      <div class="BScontent sort">
        所谓的web api 指的是一套操作浏览器功能和页面元素的api，由两个部分组成DOM 和 BOM
      </div>
      <div class="smallTitle">
        <h3>2.获取元素</h3>
      </div>
      <div class="BScontent sort">
        <div>
          1.根据id获取
        </div>
        <div>
          语法格式 ：[document.getElementById(id)],从字面上的意思你也能明白
        </div>
        <div>
          参数 id，区分大小写的字符串
        </div>
        <div>
          返回值：元素对象或则null
        </div>
        <div>
          2.根据标签的名字来获取元素
        </div>
        <div>
          语法格式[documnet.getElementsByTagName('标签名'),或则element.getElementsByTagName('标签名')]
        </div>
        <div>
          参数 标签名
        </div>
        <div>
          返回值：元素对象的集合（伪数组）
        </div>
        <div>
          注意这样子获取的的元素，需要遍历它。且是动态的获取，
        </div>
        <div>
          3.根据类名来获取元素
        </div>
        <div>
          document.getElementsByClassName(类名)
        </div>
        <div>
          document.querySelector(选择器)。返回指定元素的第一个元素，不管是什么都可以获取，id 的话加一个.类就是加一个# 标签直接写。有一定的兼容性问题，对于低版本的IE浏览器来说。
        </div>
        <div>
          document.querySelectorAll(选择器)
        </div>
        <div>
          注意哈，这里的选择器需要加上一个 #符号
        </div>
      </div>
      <div class="smallTitle">
        <h3>3.常见的一些事件</h3>
      </div>
      <div class="BScontent sort">
        鼠标事件：onclick,onmouseover,onmouseout,onfocus,onblur,onmousemove,onmouseup,onmousedown
      </div>
      <div class="bilibili" @click="jumpBilibili5">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74207242&bvid=BV1uE411t7FR&cid=126947040&page=2&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <el-card v-if="route === '8'" class="card">
      <div class="bigTitle">
        <h2>jQuery快速开发:</h2>
      </div>
      <div class="smallTitle">
        <h3>1、什么是jQuery</h3>
      </div>
      <div class="BScontent sort">
        jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库
      </div>
      <div class="smallTitle">
        <h3>2.属性操作的样式 和css操作的样式</h3>
      </div>
      <div class="BScontent sort">
        <div>
          第一种：$("元素名称").css(' name') 获取第一个匹配元素的样式属性。
        </div>
        <div>
          第二种：$("元素名称").css(' name'，'value') 设置样式属性
        </div>
        <div>
          第三种：是以对象的形式写多种样式
        </div>
      </div>
      <div class="smallTitle">
        <h3>3.width() 方法和height()方法</h3>
      </div>
      <div class="BScontent sort">
        适合获取window 和 document 的宽高，对元素的话值获取到内容宽高，不包括padding，margin，border
      </div>
      <div class="bilibili" @click="jumpBilibili6">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74207757&bvid=BV1uE411t7uS&cid=126948091&page=2&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <el-card v-if="route === '9'" class="card">
      <div class="bigTitle">
        <h2>Bootstrap框架:</h2>
      </div>
      <div class="smallTitle">
        <h3>1、什么是Bootstrap</h3>
      </div>
      <div class="BScontent sort">
        简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
      </div>
      <div class="smallTitle">
        <h3>2.布局容器</h3>
      </div>
      <div class="BScontent sort">
        Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。Bootstrap提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种容器类不能互相嵌套。
      </div>
      <div class="smallTitle">
        <h3>3.栅格系统</h3>
      </div>
      <div class="BScontent sort">
        Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
      </div>
      <div class="smallTitle">
        <h3>4.媒体查询</h3>
      </div>
      <div class="BScontent sort">
        在栅格系统中，我们在 Less 文件中使用媒体查询（media query）来创建关键的分界点阈值。
        <div>
          偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内
        </div>
      </div>
      <div class="bilibili" @click="jumpBilibili7">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74207757&bvid=BV1uE411t7uS&cid=126948378&page=55&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <el-card v-if="route === '10'" class="card">
      <div class="bigTitle">
        <h2>node.js后端开发:</h2>
      </div>
      <div class="smallTitle">
        <h3>1、什么是node.js</h3>
      </div>
      <div class="BScontent sort">
        就是一个服务器端的Javascript运行环境，可以让程序员，通过 Javascript 做 后台服务器编程开发
      </div>
      <div class="smallTitle">
        <h3>2.搭建服务器流程</h3>
      </div>
      <div class="BScontent sort">
        <div>
          <h4>(1)引入:</h4>
        </div>
        <div>
          var http = require("http");
        </div>
        <div>
          var fs =require("fs");
        </div>
        <div>
          <h4>(2)创建服务器:</h4>
        </div>
        <div>
          var server = http.createServer(function(req,res){
        </div>
        <div>
          res.writeHead(200,{"Content-type":"text/plain","Charset":"utf8"});
        </div>
        <div>
          var myReadStream = fs.createReadStream(__dirname+"/readMe.txt","utf8");
        </div>
        <div>
          myReadStream.pipe(res);
        </div>
        <div>
          <h4>(3)监听</h4>
        </div>
        <div>
          server.listen(8080,"localhost");
        </div>
        <div>
          console.log("Server is runing...")
        </div>
      </div>
      <div class="smallTitle">
        <h3>3.Express框架：基于nodejs，快速 开放，极简的web开发框架</h3>
      </div>
      <div class="BScontent sort">
        <div>
          <h4>如何使用express?</h4>
        </div>
        <div>
          1、npm安装express框架
        </div>
        <div>
          2、引入express模块
        </div>
        <div>
          3、实例化express的对象
        </div>
        <div>
          4、通过对象进行调用各种方法
        </div>
      </div>

      <div class="bilibili" @click="jumpBilibili8">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74456087&bvid=BV1qE411q74s&cid=127356280&page=1&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <el-card v-if="route === '11'" class="card">
      <div class="bigTitle">
        <h2>Vue.js前端主流框架:</h2>
      </div>
      <div class="smallTitle">
        <h3>1. vue 的三个特点：</h3>
      </div>
      <div class="BScontent sort">
        数据双向绑定，组件化，单文件组件
      </div>
      <div class="smallTitle">
        <h3>2、vue的基本概念</h3>
      </div>
      <div class="BScontent sort">
        <div>
          全局api： vue.extend、vue.set
        </div>
        <div>
          实例选项: new Vue()、el、data、compents都是vue实例选项
        </div>
        <div>
          实例属性和方法： vm.$on、vm.$data、vm.$destroy() 在$都是vue的实例和方法
        </div>
        <div>
          指令：directive
        </div>
        <div>
          内置组件：< components>< /compontents>、< keep-alive>< /keep-alive> 、< router-view>< /router-view>等
        </div>
      </div>
      <div class="smallTitle">
        <h3>3、功能接口</h3>
      </div>
      <div class="BScontent sort">
        <div>
          <h4>标签属性和条件渲染</h4>
        </div>
        <p>标签属性： v-bind：href='link";等效于:href="link"动态绑定；</p>
        <p>条件渲染： v-if、v-else、v-show；</p>
        <p>数据绑定：{{ }}、v-html(原始-HTML)、v-text；</p>
        <div>
          <h4>事件绑定-内置事件绑定，自定义事件绑定</h4>
        </div>
        <p>v-on:click="run"等效于@:click="run" 事件绑定；</p>
        <p>自定义事件绑定： 父组件自定义事件</p>
        <p>< my-compented @my-event='toggle'>< /my-compented></p>
        <p>子组件触发 my-event 自定义事件；this.$emit('my-event', opation)；</p>
        <p>父组件执行toggle 函数；</p>
      </div>
      <div class="bilibili" @click="jumpBilibili9">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74558607&bvid=BV1ME411B7DQ&cid=127529143&page=2&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <el-card v-if="route === '12'" class="card">
      <div class="bigTitle">
        <h2>Vuex仓库:</h2>
      </div>
      <div class="smallTitle">
        <h3>1. Vuex 是什么？</h3>
      </div>
      <div class="BScontent sort">
        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
      </div>
      <div class="smallTitle">
        <h3>2、Vuex中的核心内容</h3>
      </div>
      <div class="BScontent sort">
        <div>
          在VueX对象中，其实不止有state,还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员。
        </div>
        <div>
          成员列表：
        </div>
        <div>
          state 存放状态
        </div>
        <div>
          mutations state成员操作
        </div>
        <div>
          getters 加工state成员给外界
        </div>
        <div>
          actions 异步操作
        </div>
        <div>
          modules 模块化状态管理
        </div>
      </div>
      <div class="smallTitle">
        <h3>3、Vuex的工作流程</h3>
      </div>
      <div class="BScontent sort">
        <div>
          首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。
        </div>
       <div>
         如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意，1.3.3节中有提到，不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = 'hello')的话不能被VueDevtools所监控到。
       </div>
        <div>
          最后被修改后的state成员会被渲染到组件的原位置当中去。
        </div>
      </div>
      <div class="bilibili" @click="jumpBilibili10">
        学习更多视频请点击这里
      </div>
      <iframe class="bili" style="width: 100%;margin-top: 10px" src="//player.bilibili.com/player.html?aid=74592679&bvid=BV1nE411B7Uh&cid=127587140&page=2&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </el-card>
    <e-bottom></e-bottom>
  </div>
</template>

<script>
import bottom from "@/components/bottom";
export default {
  data () {
    return{
      route: '',
      font: ['○ HBuilder','○ Atom','○ Sublime Text','○ Visual Studio Code','○ WebStorm'],
      link: ['https://www.dcloud.io/','https://atom.io','https://www.sublimetext.com/','https://code.visualstudio.com/','https://www.jetbrains.com/webstorm/']
    }
  },
  created() {
    this.route = this.$route.params.id
  },
  methods: {
    jumpLink (i) {
      window.open(this.link[i])
    },
    jumpBilibili1 () {
      window.open('https://www.bilibili.com/video/BV1sE41187qA?zw')
    },
    jumpBilibili2 () {
      window.open('https://www.bilibili.com/video/BV1HE41187Nf?zw')
    },
    jumpBilibili3 () {
      window.open('https://www.bilibili.com/video/BV11E41187TQ')
    },
    jumpBilibili4 () {
      window.open('https://www.bilibili.com/video/BV1KE411t7Xt')
    },
    jumpBilibili5 () {
      window.open('https://www.bilibili.com/video/BV1uE411t7FR?p=1')
    },
    jumpBilibili6 () {
      window.open('https://www.bilibili.com/video/BV1uE411t7uS')
    },
    jumpBilibili7 () {
      window.open('https://www.bilibili.com/video/BV1uE411t7uS?p=55')
    },
    jumpBilibili8 () {
      window.open('https://www.bilibili.com/video/BV1qE411q74s')
    },
    jumpBilibili9 () {
      window.open('https://www.bilibili.com/video/BV1ME411B7DQ')
    },
    jumpBilibili10 () {
      window.open('https://www.bilibili.com/video/BV1nE411B7Uh?p=2')
    },
  },
  components: {
    eBottom: bottom
  }
}
</script>

<style lang="less" scoped>
.articleChild-container{
  .card{
    margin: 40px auto;
    width: 65%;
    font-size: 15px;
    .top{

    }
    .middle{
      display: flex;
      flex-direction: column;
      color: #0791a8;
      margin: 20px 0;
      span{
        font-size: 16px;
        line-height: 40px;
        cursor: pointer;
        &:hover{
          color: blue;
        }
      }
    }
    .bottom{
      text-indent: 30px;
      margin-bottom: 40px;
    }
  }

  .bigTitle{
    margin-bottom: 10px;
    color: orange;
    &:hover{
      transform: translateX(5px);
      transition: 0.2s ease;
      cursor: pointer;
    }
  }
  .smallTitle{
    margin: 25px 0;
    color: orange;
    &:hover{
      transform: translateX(5px);
      transition: 0.2s ease;
      cursor: pointer;
    }
  }
  .BScontent{
    text-indent: 30px;
  }
  .sort{
    margin-bottom: 20px;
  }
  .bilibili{
    text-align: center;
    font-size: 20px;
    color: red;
    &:hover{
      cursor: pointer;
    }
  }
  .bili{
    height: 500px;
  }

  @media (min-width: 992px) and (max-width: 1300px) {
    .card{
      width: 70%;

    }
    .bili{
      height: 400px;
    }

  }
  @media (min-width: 768px) and (max-width: 991px) {
    .card{
      width: 95%;

    }
    .bili{
      height: 350px;
    }

  }
  @media (max-width: 767px) {
    .card{
      width: 95%;
    }
    .bili{
      height: 200px;
    }
  }
}
</style>
